import  { useState } from 'react'
import { NavBar, Tabs, Grid } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'

function Index() {
  const nav = useNavigate()
  const [activeTab, setActiveTab] = useState('精彩回放')

  const handleBack = () => {
    nav(-1)
  }

  // 模拟视频数据
  const videoData = [
    {
      id: 1,
      viewers: 1076,
      doctor: '藏磊',
      title: '主任医师',
      hospital: '北京朝阳医院骨科',
      videoTitle: '老年骨质疏松性椎体压缩骨折的防治与思考',
      avatar: '👨‍⚕️'
    },
    {
      id: 2,
      viewers: 1015,
      doctor: '张医生',
      title: '副主任医师',
      hospital: '北京协和医院心内科',
      videoTitle: '房颤手术治疗相比药物治疗的优势',
      avatar: '👨‍⚕️'
    },
    {
      id: 3,
      viewers: 1013,
      doctor: '尹秀菊',
      title: '副主任医师',
      hospital: '北京大学人民医院',
      videoTitle: '准妈妈必须了解的妊娠期糖尿病',
      avatar: '👩‍⚕️'
    },
    {
      id: 4,
      viewers: 1005,
      doctor: '李医生',
      title: '主任医师',
      hospital: '上海华山医院皮肤科',
      videoTitle: '银屑病外用药物的选择及临床应用',
      avatar: '👩‍⚕️'
    },
    {
      id: 5,
      viewers: 1003,
      doctor: '付正菊',
      title: '主任医师',
      hospital: '青岛大学附属医院',
      videoTitle: '糖尿病与骨质疏松',
      avatar: '👩‍⚕️'
    },
    {
      id: 6,
      viewers: 1003,
      doctor: '王医生',
      title: '主治医师',
      hospital: '广州中山医院泌尿科',
      videoTitle: '爱你在心,口含即开,轻松解决"男"题',
      avatar: '👨‍⚕️'
    },
    {
      id: 7,
      viewers: 1001,
      doctor: '谭淳予',
      title: '副主任医师',
      hospital: '四川大学华西医院',
      videoTitle: '得了风湿疾病,你要关注骨骼健康',
      avatar: '👩‍⚕️'
    },
    {
      id: 8,
      viewers: 1000,
      doctor: '陈医生',
      title: '主任医师',
      hospital: '南京鼓楼医院皮肤科',
      videoTitle: '银屑病的长期管理',
      avatar: '👩‍⚕️'
    }
  ]

  const categories = ['精彩回放', '皮肤健康', '神经频道', '男性健康', '女性健康', '儿童健康']

  return (
    <div style={{background:'#fff',minHeight:'100vh'}}>
      {/* 顶部导航 */}
      <NavBar onBack={handleBack}>科普健康义诊直播间</NavBar>
      
      {/* 分类标签 */}
      <div style={{
        background:'#fff',
        borderBottom:'1px solid #f0f0f0',
        padding:'0 16px'
      }}>
        <Tabs
          activeKey={activeTab}
          onChange={setActiveTab}
          style={{
            '--active-line-color': '#1677ff',
            '--active-title-color': '#1677ff'
          }}
        >
          {categories.map(category => (
            <Tabs.Tab title={category} key={category} />
          ))}
        </Tabs>
      </div>

      {/* 视频网格 */}
      <div style={{
        padding:'12px',
        background:'#f5f5f5'
      }}>
        <Grid columns={2} gap={12}>
          {videoData.map(item => (
            <Grid.Item key={item.id}>
              <div style={{
                background:'#fff',
                borderRadius:'12px',
                overflow:'hidden',
                boxShadow:'0 2px 8px rgba(0,0,0,0.1)'
              }}>
                {/* 视频封面区域 */}
                <div style={{
                  position:'relative',
                  height:'120px',
                  background:'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                  display:'flex',
                  alignItems:'center',
                  justifyContent:'center'
                }}>
                  {/* 回放标签 */}
                  <div style={{
                    position:'absolute',
                    top:'8px',
                    left:'8px',
                    background:'rgba(255,77,79,0.9)',
                    color:'#fff',
                    padding:'4px 8px',
                    borderRadius:'4px',
                    fontSize:'12px'
                  }}>
                    回放 {item.viewers}人观看
                  </div>
                  
                  {/* 医生头像 */}
                  <div style={{
                    width:'60px',
                    height:'60px',
                    borderRadius:'50%',
                    background:'rgba(255,255,255,0.2)',
                    display:'flex',
                    alignItems:'center',
                    justifyContent:'center',
                    fontSize:'30px',
                    backdropFilter:'blur(10px)'
                  }}>
                    {item.avatar}
                  </div>
                </div>

                {/* 医生信息 */}
                <div style={{
                  padding:'12px',
                  display:'flex',
                  alignItems:'center',
                  gap:'12px'
                }}>
                  <div style={{
                    width:'40px',
                    height:'40px',
                    borderRadius:'50%',
                    background:'#f0f0f0',
                    display:'flex',
                    alignItems:'center',
                    justifyContent:'center',
                    fontSize:'20px'
                  }}>
                    {item.avatar}
                  </div>
                  <div style={{flex:1,minWidth:0}}>
                    <div style={{
                      fontSize:'14px',
                      fontWeight:600,
                      color:'#333',
                      marginBottom:'2px'
                    }}>
                      {item.doctor}
                    </div>
                    <div style={{
                      fontSize:'12px',
                      color:'#666',
                      lineHeight:'1.4'
                    }}>
                      {item.title}
                    </div>
                    <div style={{
                      fontSize:'12px',
                      color:'#999',
                      lineHeight:'1.4'
                    }}>
                      {item.hospital}
                    </div>
                  </div>
                </div>

                {/* 视频标题 */}
                <div style={{
                  padding:'0 12px 12px 12px'
                }}>
                  <div style={{
                    fontSize:'13px',
                    color:'#333',
                    lineHeight:'1.4',
                    display:'-webkit-box',
                    WebkitLineClamp:2,
                    WebkitBoxOrient:'vertical',
                    overflow:'hidden'
                  }}>
                    {item.videoTitle}
                  </div>
                </div>
              </div>
            </Grid.Item>
          ))}
        </Grid>
      </div>
    </div>
  )
}

export default Index
